<template>
	<view class="tabbar flex align-center justify-center "
	:style="{backgroundColor: current == 'video' ? '#000000' : '#FFFFFF'}">
		<view class="flex flex-direction align-center tabbar-item" @click="to('/pages/menu/home', 'home')">
			<image class="icon" :src="`/static/tabbar/home${current == 'home' ? '_cur' : ''}.png`"></image>
			<view class="" :class="[current === 'home' ? 'active-title' : 'no-active-title']">首页</view>
		</view>
		<view class="flex flex-direction align-center tabbar-item" @click="to('/pages/menu/video', 'video')">
			<image class="icon" :src="`/static/tabbar/video${current == 'video' ? '_cur' : ''}.png`"></image>
			<view class="" :class="[current === 'video' ? 'active-title' : 'no-active-title']">视频</view>
		</view>
		<view class="flex flex-direction align-center tabbar-item" @click="to('/pages/menu/ranking', 'ranking')">
			<image class="icon" :src="`/static/tabbar/ranking${current == 'ranking' ? '_cur' : ''}.png`"></image>
			<view class="" :class="[current === 'ranking' ? 'active-title' : 'no-active-title']">排行榜</view>
		</view>
		<view class="flex flex-direction align-center tabbar-item" @click="to('/pages/menu/my', 'my')">
			<image class="icon" :src="`/static/tabbar/my${current == 'my' ? '_cur' : ''}.png`"></image>
			<view class="" :class="[current === 'my' ? 'active-title' : 'no-active-title']">我的</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			current: {
				type: String,
				default: 'index'
			},
		},
		onLoad() {
			
		},
		methods: {
			toyy(){
				if(this.vuex_user.department == '行政') {
					uni.navigateTo({
						url:'/pages/room/addRoom'
					})
				} else {
					uni.navigateTo({
						url:'/pages/reserve/index'
					})
				}
			},
			to(path, type){
				if (this.current === type) return
				console.log(path)
				// uni.redirectTo({
				// 	url: path
				// })
				uni.switchTab({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar-item {
		// width: 100rpx;
		width: 25%;
	}
	.icon {
		width: 48rpx;
		height: 48rpx;
	}
	.active-title {
		font-family: 'PingFangSC-regular';
		color: $primary-color;
		font-size: 20rpx;
		margin-top: 6rpx;
	}
	.no-active-title {
		font-family: 'PingFangSC-regular';
		color: #666B75;
		font-size: 20rpx;
		margin-top: 6rpx;
	}
	.yy-btn {
		margin: 0 60rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: $dark-primary-color;
		text-align: center;
		line-height: 72rpx;
		color: #FFFFFF;
		font-size: 60rpx;
		font-weight: 400;
	}
	.tabbar {
		// background-color: #FFFFFF;
		position: fixed;
		// bottom: 68rpx;
		// left: 128rpx;
		// z-index: 200;
		// width: 494rpx;
		bottom: 0rpx;
		z-index: 200;
		width: 100%;
		height: 104rpx;
		// border-radius: 240rpx;
		// box-shadow: 0px 4rpx 20rpx 0px rgba(0, 0, 0, 0.04);
	}
	.hei{
		background-color: #000000;
	}
	.bei{
		background-color: #FFFFFF;
	}
</style>
